<?php get_public_header();?>

<div id="templatemo_wrapper">
    <div id="templatemo_content_top"></div>
    <div id="templatemo_content">
       <form id="login">
        <div id="login-box" class="marginAuto" style="margin: 0 auto">

            <H2>Login</H2>

            <div id="login-box-name" style="margin-top:20px;">
                User no.:
            </div>

            <div id="login-box-field" style="margin-top:20px;">
                <input name="user_no" id="user_no" class="form-login" title="Username" value="" size="30" maxlength="2048" />
            </div>

            <div id="login-box-name">
                Password:
            </div>

            <div id="login-box-field">
                <input name="password" id="password" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" />
            </div>


            <div id="err" class="ui-state-error ui-corner-all line" style="margin-top: 10px;display:none; padding: 6px;">
                <span class="icon icon-info"></span>
                <span class="msg"></span>
            </div>


            <div style="margin-top: 20px;">
            <button id="save" name="save">Login</button>
            </div>

        </div>

    </form>

        <div class="cleaner"></div>
    </div>

    <script>

        var msg = '<?php echo $msg; ?>';
        if (msg != '')
        {
            $('#err').removeClass('ui-state-error').addClass('ui-state-highlight');

            if (msg.indexOf('expired') == -1) $('#err').children(':first').removeClass('icon-error').addClass('icon-check');
            else $('#err').children(':first').removeClass('icon-error').addClass('icon-octa-x');

            $('#err .msg').html(msg);
            $('#err').fadeIn('slow');
        }


        $('#save').button({
            icons: {primary: 'ui-icon-locked'}
            }).click(function(e) {
            e.preventDefault();
            submitLogin();
        });


    </script>

    <?php get_public_footer();?>